<template>
  <!-- 友情链接 -->
  <div id="my-job">
    <!-- 面包屑 -->
    <div class="div-breadcrumb">
      <el-card>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>任务调度</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 搜索表单 -->
    <div class="center-query-form">
      <el-card>
        <el-row>
          <el-col :span="24">
            <el-form :inline="true" :model="queryForm" class="query-form-inline" size="mini">
              <el-form-item label="任务描述">
                <el-input v-model="queryForm.jobDesc" placeholder="任务描述"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit()">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 表格 -->
    <div class="center-table">
      <el-card>
        <el-row>
          <el-col :span="24">
            <el-table :data="tableData" stripe border size="mini" class="job-table">
              <el-table-column label="编号" align="center" width="80" fixed="left">
                <template slot-scope="scop">
                  {{ scop.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="id" label="任务id" width="80" align="center" v-if="false">
              </el-table-column>
              <el-table-column prop="jobDesc" label="描述" width="180" align="center">
              </el-table-column>
              <el-table-column prop="threadName" label="线程名" width="180" align="center">
              </el-table-column>
              <el-table-column prop="len" label="数据条数" width="100" align="center">
              </el-table-column>
              <el-table-column prop="startTime" label="开始执行时间" width="180" align="center" sortable>
              </el-table-column>
              <el-table-column prop="endTime" label="结束执行时间" width="180" align="center" sortable>
              </el-table-column>
              <el-table-column prop="during" label="持续时间" width="100" align="center" sortable>
              </el-table-column>
              <el-table-column prop="version" label="版本" width="100" align="center" v-if="false">
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="200" align="center" sortable>
              </el-table-column>
              <el-table-column prop="updateTime" label="修改时间" width="200" align="center" v-if="false">
              </el-table-column>
              <el-table-column label="操作" align="center" width="150" fixed="right">
                <template slot-scope="scope">
                  <!-- <el-button size="mini" type="primary" icon="el-icon-edit" circle
                    @click="edit(scope.$index, scope.row)">
                  </el-button> -->
                  <!-- <el-popconfirm title="这是一段内容确定删除吗？" @confirm="del(scope.$index, scope.row)">
                    <el-button size="mini" type="danger" icon="el-icon-delete" circle slot="reference"></el-button>
                  </el-popconfirm> -->

                  <el-button size="mini" type="primary" icon="el-icon-info" circle
                             @click="info(scope.$index, scope.row)">
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 分页插件 -->
    <div class="center-pagination">
      <el-card>
        <el-row>
          <el-col :span="24">
            <el-pagination background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                           @current-change="handleCurrentChange" :current-page="pagination.current"
                           :page-sizes="[10, 20, 50, 100]"
                           :page-size="pagination.size" :total="pagination.total">
            </el-pagination>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>

</template>
<script>
import {
    jobPageList
} from '@/api/third'

export default {
    name: 'my-job',
    data () {
        return {
            queryForm: {
                jobDesc: null,
                current: 1,
                size: 10
            },
            tableData: [],
            pagination: {
                current: 1,
                size: 10,
                total: 0
            }
        }
    },
    methods: {
    // 查询
        onSubmit () {
            let params = {
                jobDesc: this.queryForm.jobDesc,
                current: this.queryForm.current,
                size: this.queryForm.size
            }
            jobPageList(params).then((response) => {
                this.tableData = response.data.list
                this.pagination.total = response.data.total
                this.pagination.current = response.data.current
                this.pagination.size = response.data.size
            })
        },
        // 切换每页条数
        handleSizeChange (size) {
            let params = {
                jobDesc: this.queryForm.jobDesc,
                current: this.queryForm.current,
                size: size
            }
            jobPageList(params).then((response) => {
                this.tableData = response.data.list
                this.pagination.total = response.data.total
                this.pagination.current = response.data.current
                this.pagination.size = response.data.size
            })
            this.queryForm.size = size
        },

        // 切换页码
        handleCurrentChange (current) {
            let params = {
                jobDesc: this.queryForm.jobDesc,
                current: current,
                size: this.queryForm.size
            }
            jobPageList(params).then((response) => {
                this.tableData = response.data.list
                this.pagination.total = response.data.total
                this.pagination.current = response.data.current
                this.pagination.size = response.data.size
            })
            this.queryForm.current = current
        },
        info (index, row) {
            console.log('row', row)
        }
    },
    mounted () {
        let params = {
            jobDesc: this.queryForm.jobDesc,
            current: this.queryForm.current,
            size: this.queryForm.size
        }
        jobPageList(params).then((response) => {
            this.tableData = response.data.list
            this.pagination.total = response.data.total
            this.pagination.current = response.data.current
            this.pagination.size = response.data.size
        })
    }
}
</script>

<style scoped>
#my-job {
  width: 100%;
  height: auto;
}

.div-breadcrumb {
  margin: 20px 30px 0px 30px;
}

.bg-purple {
  background: #d3dce6;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

/* 搜索表单 */
.center-query-form {
  margin: 0px 30px 0px 30px;
}

/* 表格 */
.center-table {
  margin: 0px 30px 0px 30px;
}

.job-table {
  width: 100%;
}

/* 分页 */
.center-pagination {
  margin: 0px 30px 20px 30px;
  text-align: center;
}

/* dialog */
.aboutDialog {
  height: auto;
  text-align: left;
}

.aboutDialog >>> .el-dialog__body {
  padding: 15px 15px 15px 0px !important;
}

.aboutDialog >>> .el-dialog__header {
  padding: 10px 20px;
  height: 25px;
  line-height: 25px;
  text-align: left;
  background: #3378df;
  border-bottom: solid 1px #3378df;
}

.aboutDialog >>> .el-dialog__title {
  color: #fff;
  font-size: 14px;
}

.aboutDialog >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.aboutDialog >>> .el-dialog__header btn:hover .el-dialog__close {
  color: #fff;
}

.aboutDialog >>> .el-dialog__header btn {
  top: 13px;
}

.aboutDialog >>> .el-dialog__footer {
  padding: 10px 20px;
  border-top: solid 1px #3378df;
}
</style>
